<template>
  <div class="SelectCity">
    <div v-for="(item, index) in contentDataCity" :key="index">
      <!-- <van-field
        :readonly="isreadonsly1"
        clickable
        :required="bitian"
        name="picker"
        :value="ValueCity"
        :label="item.label"
        placeholder="请选择所属市"
        @click="showPickerC = true"
        :rules="[{ required: true, message: '请选择所属市' }]" />
      <van-popup v-model="showPickerC" position="bottom" get-container="#popup">
        <van-picker show-toolbar :columns="CityColumns" value-key="cityname" @confirm="onConfirmCity" @cancel="showPickerC = false" />
      </van-popup> -->
      <selectPicker
        :isTime="false"
        :keys="item.key"
        :bitian="item.required"
        :ISrequired="!item.readonly"
        :values="'cityname'"
        :DICID="'citycode'"
        :placeholder="item.label"
        :columns="item.NYDARR"
        :labels="item.label"
        :selectValue="JFData[0][item.key] | inUseName(item.NYDARR)"
        @getMessage="setValue1"></selectPicker>
    </div>
    <!-- <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
      <van-field :required="bitian" :readonly="isreadonsly1" clickable name="picker" :value="valueXian" label="所属县(区)" placeholder="请选择所属县(区)" @click="showPickerX = true" />
      <van-popup v-model="showPickerX" position="bottom" get-container="#popup">
        <van-picker show-toolbar :columns="XianColumns" value-key="cityname" @confirm="onConfirmXian" @cancel="showPickerX = false" />
      </van-popup>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
      <van-field :required="bitian" :readonly="isreadonsly1" clickable name="picker" :value="valueZhen" label="所属镇" placeholder="请选择所属镇" @click="showPickerT = true" />
      <van-popup v-model="showPickerT" position="bottom" get-container="#popup">
        <van-picker show-toolbar :columns="TownColumns" value-key="cityname" @confirm="onConfirmTown" @cancel="showPickerT = false" />
      </van-popup>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
      <van-field :required="bitian" :readonly="isreadonsly1" clickable name="picker" :value="valueCun" label="所属村" placeholder="请选择所属村" @click="showPickerCun = true" />
      <van-popup v-model="showPickerCun" position="bottom" get-container="#popup">
        <van-picker show-toolbar :columns="CunColumns" value-key="cityname" @confirm="onConfirmCun" @cancel="showPickerCun = false" />
      </van-popup>
    </div> -->
  </div>
</template>

<script>
import selectPicker from '@/utils/selectPicker'
import { getDatalistForTree } from '@/utils/api'
export default {
  data() {
    return {
      showPickerC: false,
      showPickerCun: false,
      showPickerT: false,
      showPickerX: false,
      CityColumns: [],
      XianColumns: [],
      TownColumns: [],
      CunColumns: [],
      ValueCity: '',
      valueXian: '',
      valueZhen: '',
      valueCun: ''
    }
  },
  props: {
    isreadonsly1: {
      typeof: Boolean,
      default: true
    },
    bitian: {
      typeof: Boolean,
      default: true
    },
    JFData: {
      typeof: Array
    },
    contentDataCity:{
        typeof: Array
    }
  },
  created() {
    this.getCityOpenDataView()
  },
  mounted() {},
  methods: {
    onConfirmCity(value) {
      this.ValueCity = value.cityname
      this.showPickerC = false
      this.getXianOpenDataView(value.citycode)
    },
    onConfirmXian(value) {
      this.valueXian = value.cityname
      this.showPickerX = false
      this.getTownOpenDataView(value.citycode)
    },
    onConfirmTown(value) {
      this.valueZhen = value.cityname
      this.showPickerT = false
      this.getCunOpenDataView(value.citycode)
    },
    onConfirmCun(value) {
      this.valueCun = value.cityname
      this.showPickerCun = false
    },
    getCityOpenDataView: async function () {
      this.CityColumns = []
      const res = await getDatalistForTree('330000000000')
      this.CityColumns = res.data.data
    },
    getXianOpenDataView: async function (data) {
      this.XianColumns = []
      const res = await getDatalistForTree(data)
      this.XianColumns = res.data.data
    },
    getTownOpenDataView: async function (data) {
      this.TownColumns = []
      const res = await getDatalistForTree(data)
      this.TownColumns = res.data.data
    },
    getCunOpenDataView: async function (data) {
      this.CunColumns = []
      const res = await getDatalistForTree(data)
      this.CunColumns = res.data.data
    }
  },
  components: { selectPicker }
}
</script>

<style lang="scss">
.SelectCity .van-field__label {
  color: black;
  font-weight: bold !important;
  font-size: 13px !important;
  width: 8em;
}
.SelectCity .van-field__control {
  text-align: right;
}

.SelectCity .van-radio--horizontal {
  margin-right: 30px;
}
</style>
